<template>
   <el-container class="main-con">
      <el-aside :style="{ width: leftWidth }" class="aside">
         <MinaMenu :isCollapse="isCollapse"></MinaMenu>
      </el-aside>
      <el-container>
         <el-container>
            <el-header class="header">
               <Header @clickicon="clickicon" @clickMenu="clickMenu" :leftWidth="leftWidth" :isCollapse="isCollapse"></Header>
            </el-header>
            <!-- 切换路由加动画 -->
            <el-main ref="elMainDom" class="custom-page-transition elMain page-enter-active" style="background-color: #fff;">
                  <router-view :key="$route.fullPath"></router-view>
               </el-main>
         </el-container>
      </el-container>
   </el-container>
</template>

<script setup lang="ts">
import MinaMenu from "@/components/MinaMenu.vue";
import Header from "@/components/Header.vue";
import { ref, computed, nextTick, watch, onMounted } from "vue";
import { useRouter, useRoute } from "vue-router";
import { useRouterStore } from "@/stores";
const ruterStore = useRouterStore();
let loading = ref(false);
const isCollapse = computed(() => ruterStore.isCollapse);
const leftWidth = computed(() => ruterStore.leftWidth);
const children = computed(() => ruterStore.children);
const route = useRoute();
const clickicon = () => {
   if (children.value.length > 0) {
      ruterStore.toggleCollapse();
   }
};
interface elMainDom {
   $el: HTMLElement;
   classList: DOMTokenList;
}

let elMainDom = ref<elMainDom | null>(null);

interface MenuItemData {
   title: string;
   path: string;
   icon: string;
   type: string;
   disabled: boolean;
   children: MenuItemData[];
}

let menuItem = ref<MenuItemData>({
   title: '首页',
   path: '',
   icon: '',
   type: '',
   disabled: false,
   children: [],
});
const clickMenu = (item: MenuItemData) => {
   menuItem.value = item;
   console.log(menuItem.value,'menuItem');
}

onMounted(() => {
   setTimeout(() => {
      loading.value = true;
   }, 1000);
});


watch(() => route.path, (newVal, oldVal) => {
   nextTick(() => {

      if(elMainDom.value) {
         // 移除当前动画类
         elMainDom.value.$el.classList.remove('page-enter-active');
       
         // 添加动画类，触发动画
         setTimeout(() => {
            elMainDom.value&& elMainDom.value.$el.classList.add('page-enter-active');
         }, 0); 
      }
   });
});

</script>
<style scoped lang="scss">

/* 自定义页面过渡动画 */
.custom-page-transition {
  position: relative;
}

.page-enter-active {
  animation: fadeInRight 0.5s ease forwards;
}

@keyframes fadeInRight {
  0% {
     transform: translateX(180px);
    opacity: 0.1;
  }
  20% {
    opacity: 0.2;
  }
  30% {
    opacity: 0.3;
  }
  40% {
    opacity: 0.4;
  }
  50% {
    opacity: 0.5;
  }
  60% {
    opacity: 0.6;
  }
  70% {
    opacity: 0.7;
  }
  80% {
    opacity: 0.8;
  }
  90% {
    opacity: 0.9;
  }
 
  100% {
     transform: translateX(0);
    opacity: 1;
  }
}

/* 淡入淡出动画 */
.fade-enter-active,
.fade-leave-active {
   transition: opacity 0.5s ease;
}

.fade-enter-from,
.fade-leave-to {
   opacity: 0;
}

::v-deep .el-header {}

.header {
   position: -webkit-sticky;
   /* Safari */
   position: sticky;
   width: 100%;
   top: 0;
   right: 0;
   height: 50px;
   background-color: rgb(230, 231, 238);
   z-index: 999;
   padding: 0px;
}

.el-aside {
   transition: width 0.2s;
   overflow: hidden;
   background-color: #F5F8FD;

}

.main-con {
   min-height: 100vh;
   overflow: hidden;
}

.el-main {
   background: #dbdbdb;
}
</style>
